<template>
  <canvas id="Timeline"></canvas>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import { TimeLine } from "./time";
const isMount = ref(false);
onMounted(() => {
  isMount.value = true;
  drawLine();
});
const drawLine = () => {
  if (!isMount.value) return;
  const timeClass = new TimeLine("#Timeline", {
    fill: false,
    width: document.documentElement.clientWidth,
    height: 60,
  });
  // 自定义绘制
  timeClass.draw({
    currentTime: new Date().getTime(),
    // areas: [
    //   {
    //     startTime: 1651827433000,
    //     endTime: 1651829413000,
    //     bgColor: "#f897aa",
    //   },
    //   {
    //     startTime: 1651829533000,
    //     endTime: 1651832533000,
    //   },
    // ],
  });
  timeClass.on("dragged", (timestamp) => {
    console.log(new Date(timestamp));
    // ...
  });
};
window.addEventListener("resize", drawLine);
onBeforeUnmount(() => {
  window.removeEventListener("resize", drawLine);
});
</script>

<style scoped></style>
